<template>
  <el-container>
    <el-header>
      <Pagetitle :title="title1" :SecTitle="title2"></Pagetitle>
    </el-header>
    <el-main class="pagination-padding">
      <!-- 上边的搜索栏 -->
      <el-row>
        <el-col>
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="活动时间">
              <el-date-picker
                v-model="formInline.date"
                type="datetime"
                placeholder="选择日期时间"
                value-format="timestamp"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="编号">
              <el-input
                v-model="formInline.id"
                placeholder="编号"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="用户">
              <el-input
                v-model="formInline.user"
                placeholder="用户"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="陪护员">
              <el-input
                v-model="formInline.chaperone"
                placeholder="陪护员"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">筛选</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>

      <!-- 下边的列表 -->
      <el-table :data="tableData" style="width: 100%" class="table-radius">
        <el-table-column
          prop="orderNo"
          label="订单编号"
          width="150"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="userId" label="ID" width="150" align="center">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="150" align="center">
        </el-table-column>
        <el-table-column
          prop="serviceType"
          label="服务类型"
          width="130"
          header-align="center"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="escortsName"
          label="陪护员"
          width="100"
          align="center"
        >
        </el-table-column>
        <el-table-column label="评分" width="200" align="center">
          <template slot-scope="scope">
            <el-rate
              :value="scope.row.score"
              disabled
              show-score
              text-color="#ff9900"
              score-template="{value}"
            >
            </el-rate>
          </template>
        </el-table-column>
        <el-table-column
          prop="created"
          label="评价时间"
          width="160"
          align="center"
        >
        </el-table-column>
        <el-table-column label="操作" width="160" align="center">
          <template slot-scope="scope">
            <el-button type="info" size="mini" plain @click="seeInfo(scope.row)"
              >查看</el-button
            >
            <el-button
              type="danger"
              size="mini"
              plain
              @click="DeleMessageBox(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 点击查看的弹出的消息框 -->
      <el-dialog title="查看" :visible.sync="dialogTableVisible" :center="true">
        <el-descriptions class="margin-top" :column="1" size="medium" border>
          <el-descriptions-item>
            <template slot="label"> 订单编号 </template>
            {{ InfoData.orderNo }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> ID </template>
            {{ InfoData.userId }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 姓名 </template>
            {{ InfoData.name }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 服务类型 </template>
            {{ InfoData.serviceType }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 陪护员 </template>
            {{ InfoData.escortsName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 评分 </template>
            {{ InfoData.serviceAttitude }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 服务时长 </template>
            {{ InfoData.created }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 服务态度 </template>
            {{ InfoData.serviceTime }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 专业程度 </template>
            {{ InfoData.professional }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 内容 </template>
            {{ InfoData.content }}
          </el-descriptions-item>
        </el-descriptions>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogTableVisible = false">返回</el-button>
        </div>
      </el-dialog>
    </el-main>

    <!-- 分页 -->
    <el-main class="pagination-padding">
      <Paging
        @pagesizeChange="getPagesize"
        @currentPageChange="getCurrentPage"
        :total="total"
        :pagesize="pagesize"
        :currentPage="currentPage"
      ></Paging>
    </el-main>
  </el-container>
</template>


<script>
import Pagetitle from "../../components/common/title.vue";
import Paging from "../../components/paging/paging.vue";
export default {
  data() {
    return {
      title1: "评价管理",
      title2: "评价列表",
      total: 5, //总共多少条，这个需要通过接口获取后赋值
      pagesize: 4,
      currentPage: 1,
      dialogTableVisible: false,

      formInline: {
        user: "",
        id: "",
        chaperone: "",
        date: "",
      },
      //通过回台获取赋值给tableData
      tableData: [],
      //点击查看后通过后台查询的数据
      InfoData: {
        orderNo: "",
        userId: "",
        name: "",
        serviceType: "",
        escortsName: "",
        serviceAttitude: "",
        created: "",
        serviceTime: "",
        professional: "",
        content: "",
      },
    };
  },
  components: {
    Pagetitle,
    Paging,
  },
  methods: {
    //子组件传入pagesize
    getPagesize(val) {
      this.pagesize = val;
      this.getListData(
        this.formInline.date,
        this.formInline.chaperone,
        this.formInline.user,
        this.formInline.id,
        this.currentPage,
        this.pagesize
      );
    },
    //子组件传入CurrentPage
    getCurrentPage(val) {
      this.currentPage = val;
      this.getListData(
        this.formInline.date,
        this.formInline.chaperone,
        this.formInline.user,
        this.formInline.id,
        this.currentPage,
        this.pagesize
      );
    },
    //获取数据
    async getListData(created, escortsName, uname, orderNo, page, pagesize) {
      const { data: res } = await this.axios({
        method: "POST",
        url: "/evaluation/list",
        data: {
          created: created,
          escortsName: escortsName,
          name: uname,
          orderNo: orderNo,
          page: page,
          pagesize: pagesize,
        },
        
      });
      console.log(res);
      if (res.code == 0) {
        this.total = this.count;
        // this.value.splice(0,this.value.length)
        res.data.forEach((item) => {
          // console.log(item);
          item.score = this.valveTransfer(item.score);

          // this.value.push(item.score)
          item.created = this.timeTransfer(item.created);
        });
        // console.log(res.data);
        this.tableData = res.data;
        // console.log(this.tableData);
        if (this.tableData.length == 1) {
          this.currentPage = this.currentPage - 1;
        }
      }
    },
    //查看调接口
    async seeData(id) {
      const { data: res } = await this.axios({
        method: "get",
        url: "/evaluation/" + id,
       
      });
      console.log(res);
      if (res.code == 0) {
        this.InfoData.orderNo = res.data.orderNo;
        this.InfoData.userId = res.data.userId;
        this.InfoData.name = res.data.name;
        this.InfoData.serviceType = res.data.serviceType;
        this.InfoData.escortsName = res.data.escortsName;
        this.InfoData.serviceAttitude = res.data.serviceAttitude;
        this.InfoData.created = res.data.serviceTime;
        this.InfoData.serviceTime = res.data.serviceTime;
        this.InfoData.professional = res.data.professional;
        this.InfoData.content = res.data.content;
      }
    },
    //删除调接口
    async deleData(deleId) {
      const { data: res } = await this.axios({
        method: "post",
        url: "/evaluation/delete/" + deleId,
       
      });
      if (res.code == 0) {
        this.tableData.length = this.tableData.length - 1;
        if (this.tableData.length == 0) {
          this.currentPage = this.currentPage - 1;
        }
        this.getListData(
          this.formInline.date,
          this.formInline.chaperone,
          this.formInline.user,
          this.formInline.id,
          this.currentPage,
          this.pagesize
        );
      }
    },
    //搜索按钮函数
    onSubmit() {
      this.currentPage = 1;
      console.log(this.formInline.id);
      this.getListData(
        this.formInline.date,
        this.formInline.chaperone,
        this.formInline.user,
        this.formInline.id,
        this.currentPage,
        this.pagesize
      );
    },
    //查看信息按钮函数
    seeInfo(row) {
      this.seeData(row.id);
      this.dialogTableVisible = true;
    },
    //删除按钮函数
    DeleMessageBox(row) {
      this.$confirm("此操作将删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          //在这里调用后台
          this.deleData(row.id);

          this.$message({
            type: "success",
            message: "删除成功!",
            duration: 700,
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
            duration: 700,
          });
        });
    },
    //分值除20
    valveTransfer(value) {
      value = value / 20;
      return value;
    },
    //时间戳的转换
    timeTransfer(timestamp) {
      var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
      var h =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      var m =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      var s =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return Y + M + D + h + m + s;
    },
  },
  created() {
    //调用获取函数
    this.getListData(
      this.formInline.date,
      this.formInline.chaperone,
      this.formInline.user,
      this.formInline.id,
      this.currentPage,
      this.pagesize
    );
  },
};
</script>

<style lang="less" scoped>
.pagination-padding {
  padding: 20px 0;
}
.table-radius {
  border-radius: 5px;
}
</style>